<template>
    <div class="log-container">
      <h2>消息日志</h2>
      
      <div class="filter-bar">
        <el-form :inline="true">
          <el-form-item label="发送账号">
            <el-select v-model="filter.sender" placeholder="选择账号">
              <el-option label="全部" value=""></el-option>
              <el-option 
                v-for="account in accounts" 
                :key="account.accountId"
                :label="account.accountName"
                :value="account.accountId"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="filter.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <el-table :data="logs" v-loading="loading">
        <el-table-column prop="createTime" label="发送时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="sender" label="发送账号" width="120" />
        <el-table-column prop="content" label="内容" show-overflow-tooltip />
        <el-table-column label="接收人" width="150">
          <template #default="{ row }">
            {{ formatReceivers(row.receiverIds) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-link v-if="row.jumpUrl" :href="row.jumpUrl" target="_blank">查看</el-link>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @current-change="handlePageChange"
        :current-page="pagination.page"
        :page-size="pagination.size"
        :total="totalLogs"
        layout="total, prev, pager, next"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { useMessageStore } from '@/stores/MessageStore';
  import { format } from 'date-fns';
  
  const store = useMessageStore();
  const loading = computed(() => store.loading);
  const logs = computed(() => store.logs);
  const totalLogs = computed(() => store.totalLogs);
  const accounts = computed(() => store.accounts);
  
  const filter = ref({
    sender: '',
    dateRange: []
  });
  
  const pagination = ref({
    page: 1,
    size: 10
  });
  
  onMounted(() => {
    store.loadAccounts();
    fetchLogs();
  });
  
  function formatDate(dateStr) {
    return format(new Date(dateStr), 'yyyy-MM-dd HH:mm');
  }
  
  function formatReceivers(receivers) {
    const ids = JSON.parse(receivers);
    return ids.length > 2 ? `${ids[0]}等${ids.length}人` : ids.join(', ');
  }
  
  function handleSearch() {
    pagination.value.page = 1;
    fetchLogs();
  }
  
  function handlePageChange(page) {
    pagination.value.page = page;
    fetchLogs();
  }
  
  function fetchLogs() {
    const params = {
      page: pagination.value.page,
      size: pagination.value.size,
      sender: filter.value.sender
    };
    
    if (filter.value.dateRange && filter.value.dateRange.length === 2) {
      params.startTime = filter.value.dateRange[0].toISOString();
      params.endTime = filter.value.dateRange[1].toISOString();
    }
    
    store.queryLogs(params);
  }
  </script>